<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css"
          href="easyui/themes/bootstrap/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="easyui/demo/demo.css">
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="myjs/path.js"></script>
    <script src="js/yangshi.js"></script>
</head>
<style type="text/css">
    .datagrid-footer {
        background-color: #f7c66c;
    }
    .datagrid-footer {
        background-color: #f7c66c;
    }
</style>
<body style="width: 100%; height: 100%;">
<div id="tb" style="padding: 5px; height: auto">

    <%-- 年季：<input id="nj" style="width: 120px;">--%>
    <div>
        商品属性查询：年<input id="year"class="easyui-combobox" style="width: 120px;"  data-options="valueField:'year',textField:'year',panelHeight:'auto'">
        季<input id="season" class="easyui-combobox" style="width: 120px;" data-options="valueField:'season',textField:'season',panelHeight:'auto'">
        品牌<input id="brand" class="easyui-combobox" style="width: 120px;" data-options="valueField:'pinpai',textField:'pinpai',panelHeight:'auto'">
        查看方式:<select id="chakanfangshi" data-options="editable:false,panelHeight:'auto'" style="width: 80px;"
                     class="easyui-combobox">
        <option value="0" selected="selected">款号</option>
        <option value="1">颜色</option>
        <option value="2">尺码</option>
    </select>
        <a iconCls="icon-save" class="easyui-linkbutton" type="button" onclick="saveToExcelMX()">导出报表</a>
    </div>
    <div>
        机构:<input id="bumeng" class="easyui-combotree" style="width: 200px;">
        销售分类:
        <select id="xiaoshoufenlei" data-options="editable:false,panelHeight:'auto'" style="width: 80px;"
                class="easyui-combobox">
            <option value="-1">全部</option>
            <option value="0">批发</option>
            <option value="1">分销</option>
            <option value="2">零售</option>
        </select>
        客户：<input id="kehu" style="width: 120px;" class="easyui-combobox">

        出库日期:<input id="qtime" type="text" class="easyui-datebox" data-options="editable:false" style="width: 120px">
        到:<input id="etime" type="text" class="easyui-datebox" data-options="editable:false" style="width: 120px">

        <input id="key" class="easyui-searchbox" data-options="prompt:'输入关键词搜索',searcher: doSearch"
               style="width: 200px"></input>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-reload',plain:true"
           onclick="chongzhi()">重置搜索</a>


    </div>
</div>


</div>
<table id="cxdm">
    <!--table容器-->
</table>
<input id='jgid' type="hidden" value="<%=request.getParameter("jgid")%>">
<script>

    $(function () {
     $.ajax({
            url: path + "/production/selectallattr.do",
            type: 'post',
            dataType: "json",
            success: function (data) {
                console.log(data)
                $('#season').combobox("loadData", data.data.seasonx);
                $('#year').combobox("loadData", data.data.yearx);
                $('#brand').combobox("loadData", data.data.pinpaix);

            }
        })

        $('#bumeng').combotree({
            url: path + '/jg/tree.do',
            required: true,
            loadFilter: function (data) {
                return data.rows
            }, onLoadSuccess: function (node, data) {
                if (data.length > 0) {
                    $("#bumeng").combotree('setValue', data[0].id);
                }
                kehu(data[0])
                loadGrid(data[0].id, $("#key").searchbox('getValue'))
            }, onClick: function (node) {
                kehu(node)
                loadGrid(node.id, $("#key").searchbox('getValue'))
            }
        })
    })

    function kehu(node) {

        $('#kehu').combobox({
            url: path + '/pifashang/pfslistthreport.do?jgid=' + node.id + "&parentId=" + node.parent_id + "&jgleixing=" + node.leixing + "&shengfen=" + node.shengfen,
            valueField: 'id',
            textField: 'kehuming',
            onLoadSuccess: function () {  // 加载完成后,设置选中第一项
                $('#kehu').combobox("clear")
                /*   var val = $(this).combobox("getData");
                 for (var item in val[0]) {
                 if (item == "id") {
                 $(this).combobox("select", val[0][item]);
                 }
                 }*/
            },
            loadFilter: function (data) {
                return data.data
            }
        })
    }
    /***
     *重置搜索条件
     */

    function chongzhi() {
        $('#qtime').combo('setValue', '');
        $('#etime').combo('setValue', '');
        $("#key").searchbox('setValue', '');
        loadGrid($('#bumeng').combotree("getValue"), $("#key").searchbox('getValue'))
    }

    function doSearch(value) {
        loadGrid($('#bumeng').combotree('getValue'), value);
    }

</script>
</body>
</html>
<script>
    $(document).keyup(function (event) {
        if (event.keyCode == 13) {
            loadGrid($('#bumeng').combotree('getValue'), value);
        }
    });


    function loadGrid(jgId, key) {
        var etime = $("#etime").val();
        if (null != etime && '' != etime) {
            etime += " 23:59:59";
        }
        $("#cxdm").datagrid({
            url: path + '/chuku/findChuKuReport.do',
            queryParams: {
                jgId: jgId,
                key: key,
             /*   nj: $("#nj").combobox("getValue"),*/
                type: $('#chakanfangshi').combobox('getValue'),//查看客户，商品。。。。
                chukuleixing: $('#xiaoshoufenlei').combobox('getValue'),
                wldwId: $('#kehu').combobox('getValue'),
                stime: $("#qtime").val(), // 需要查询的商品款号
                etime: etime, // 需要查询的商品款号,
                year: $('#year').combobox("getValue"),
                season: $('#season').combobox("getValue"),
                brand:$('#brand').combobox("getValue")
            }
        })
    }

    //导出销售

    function saveToExcelMX() {
        var shujuSize = $("#cxdm").datagrid("getRows").length;
        if (shujuSize == 0) {
            alert("暂无数据!")
            return;
        }
        var etime = $("#etime").val();
        if (null != etime && '' != etime) {
            etime += " 23:59:59";
        }
        window.location.href = path+"/chuku/sale_report.xls?" +
            "jgId="+ $('#bumeng').combotree('getValue')
            + "&key=" + $("#key").searchbox('getValue')
            +  "&chukuleixing="+$('#xiaoshoufenlei').combobox('getValue')
            +"&type=" + $('#chakanfangshi').combobox('getValue')
            +"&wldwId="+$('#kehu').combobox('getValue')
            +"&year="+$('#year').combobox("getValue")
            +"&season="+$('#season').combobox("getValue")
            +"&brand="+$('#brand').combobox("getValue")
            +"&stime="+$('#qtime').val()
            +"&etime="+etime
    }

    //加载数据
    $('#cxdm').datagrid(
        {
            width: 'auto',
            toolbar: '#tb',
            //height : 340,
            singleSelect: true,
            loadMsg: '数据加载中请稍后……',
            pagination: true,
            rownumbers: true,
            pageSize: 10,//分页大小
            fitColumns: false,
            sortName: 'zshuliang',
            sortOrder: 'desc',
            striped: true,
            collapsible: true,
            pageList: [10, 15],//每页的个数
            fit: true,//自动补全
            showFooter: true,
            columns: [[{
                field: 'product',
                title: '商品款号',
                align: 'center',
                width: 200
            }, {
                field: 'brand',
                title: '品牌',
                align: 'center',
                width: 100
            }, {
                field: 'year',
                title: '年份',
                align: 'center',
                width: 100
            }, {
                field: 'season',
                title: '季节',
                align: 'center',
                width: 100
            }, {
                field: 'style',
                title: '大小童',
                align: 'center',
                width: 100
            }, {
                field: 'dalei',
                title: '大类',
                align: 'center',
                width: 100
            }, {
                field: 'color',
                title: '颜色',
                align: 'center',
                width: 100
            }
            , {
                field: 'size',
                title: '尺码',
                align: 'center',
                width: 100
            }, {
                field: 'zshuliang',
                title: '净销量/件',
                align: 'right',
                sortable: true,
                width: 100
            }, {
                field: 'zongjia',
                title: '金额/¥',
                align: 'right',
                    sortable: true,

                width: 100,
                formatter: function (value) {
                    if (value != null) {
                        return value.toFixed(2);
                    }
                }
            }, {
                field: 'xjsl',
                title: '小计/件',
                align: 'right',

                width: 100
            }, {
                field: 'xjje',
                title: '总价/¥',
                align: 'right',
                width: 100,
                formatter: function (value) {
                    if (value != null) {
                        return value.toFixed(2);
                    }
                }
            }]],
            onLoadSuccess: function (data) {
                hideAndShow()
                 console.log(data)
                //给表格增加一行解决最后小计不算的问题
                $('#cxdm').datagrid('appendRow', {
                    product: '',
                    zongjia: 0.00,
                    xjje: 0.00
                });

                var xjsl = 0;
                var xjje = 0;
                var columns = $('#cxdm').datagrid("options").columns;
                var rows = $('#cxdm').datagrid("getRows");
                var count = 0;
                for (var i = 1; i < data.rows.length; i++) {
                    if (xjsl == 0) {
                        xjsl += data.rows[i - 1]['zshuliang']
                        xjje += data.rows[i - 1]['zongjia']
                    }
                    if (data.rows[i]['product'] == data.rows[i - 1]['product']) {
                        count++;
                        xjsl += data.rows[i]['zshuliang']
                        xjje += data.rows[i]['zongjia']
                    } else {
                        rows[i - 1 - count][columns[0][10].field] = xjsl;
                        rows[i - 1 - count][columns[0][11].field] = xjje;
                        $('#cxdm').datagrid('refreshRow', i - 1 - count);
                        xjsl = 0;
                        xjje = 0;
                        count = 0;
                    }
                }
                //删除最后一行
                $('#cxdm').datagrid('deleteRow', data.rows.length - 1);


                var promark = 1;      //这里涉及到简单的运算，mark是计算每次需要合并的格子数
                var colmark = 1;
                if ($('#chakanfangshi').combobox('getValue') == 1) {
                    for (var i = 1; i < data.rows.length; i++) {     //这里循环表格当前的数据
                        if (data.rows[i]['product'] == data.rows[i - 1]['product']) {   //后一行的值与前一行的值做比较，相同就需要合并
                            promark += 1;
                            $(this).datagrid('mergeCells', {
                                index: i + 1 - promark,                 //datagrid的index，表示从第几行开始合并；紫色的内容需是最精髓的，就是记住最开始需要合并的位置
                                field: 'product',                 //合并单元格的区域，就是clomun中的filed对应的列
                                rowspan: promark                  //纵向合并的格数，如果想要横向合并，就使用colspan：mark
                            });
                            $(this).datagrid('mergeCells', {
                                index: i + 1 - promark,                 //datagrid的index，表示从第几行开始合并；紫色的内容需是最精髓的，就是记住最开始需要合并的位置
                                field: 'xjsl',                 //合并单元格的区域，就是clomun中的filed对应的列
                                rowspan: promark                  //纵向合并的格数，如果想要横向合并，就使用colspan：mark
                            });
                            $(this).datagrid('mergeCells', {
                                index: i + 1 - promark,                 //datagrid的index，表示从第几行开始合并；紫色的内容需是最精髓的，就是记住最开始需要合并的位置
                                field: 'xjje',                 //合并单元格的区域，就是clomun中的filed对应的列
                                rowspan: promark                  //纵向合并的格数，如果想要横向合并，就使用colspan：mark
                            });
                            $(this).datagrid('mergeCells', {
                                index: i + 1 - promark,                 //datagrid的index，表示从第几行开始合并；紫色的内容需是最精髓的，就是记住最开始需要合并的位置
                                field: 'brand',                 //合并单元格的区域，就是clomun中的filed对应的列
                                rowspan: promark                  //纵向合并的格数，如果想要横向合并，就使用colspan：mark
                            });
                            $(this).datagrid('mergeCells', {
                                index: i + 1 - promark,                 //datagrid的index，表示从第几行开始合并；紫色的内容需是最精髓的，就是记住最开始需要合并的位置
                                field: 'year',                 //合并单元格的区域，就是clomun中的filed对应的列
                                rowspan: promark                  //纵向合并的格数，如果想要横向合并，就使用colspan：mark
                            });
                            $(this).datagrid('mergeCells', {
                                index: i + 1 - promark,                 //datagrid的index，表示从第几行开始合并；紫色的内容需是最精髓的，就是记住最开始需要合并的位置
                                field: 'season',                 //合并单元格的区域，就是clomun中的filed对应的列
                                rowspan: promark                  //纵向合并的格数，如果想要横向合并，就使用colspan：mark
                            });
                            $(this).datagrid('mergeCells', {
                                index: i + 1 - promark,                 //datagrid的index，表示从第几行开始合并；紫色的内容需是最精髓的，就是记住最开始需要合并的位置
                                field: 'style',                 //合并单元格的区域，就是clomun中的filed对应的列
                                rowspan: promark                  //纵向合并的格数，如果想要横向合并，就使用colspan：mark
                            });
                            $(this).datagrid('mergeCells', {
                                index: i + 1 - promark,                 //datagrid的index，表示从第几行开始合并；紫色的内容需是最精髓的，就是记住最开始需要合并的位置
                                field: 'dalei',                 //合并单元格的区域，就是clomun中的filed对应的列
                                rowspan: promark                  //纵向合并的格数，如果想要横向合并，就使用colspan：mark
                            });
                        } else {
                            promark = 1;                                         //一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
                        }
                    }
                } else if ($('#chakanfangshi').combobox('getValue') == 2) {
                    for (var i = 1; i < data.rows.length; i++) {     //这里循环表格当前的数据
                        if (data.rows[i]['product'] == data.rows[i - 1]['product']) {   //后一行的值与前一行的值做比较，相同就需要合并
                            promark += 1;
                            $(this).datagrid('mergeCells', {
                                index: i + 1 - promark,                 //datagrid的index，表示从第几行开始合并；紫色的内容需是最精髓的，就是记住最开始需要合并的位置
                                field: 'product',                 //合并单元格的区域，就是clomun中的filed对应的列
                                rowspan: promark                  //纵向合并的格数，如果想要横向合并，就使用colspan：mark
                            });
                            $(this).datagrid('mergeCells', {
                                index: i + 1 - promark,                 //datagrid的index，表示从第几行开始合并；紫色的内容需是最精髓的，就是记住最开始需要合并的位置
                                field: 'xjsl',                 //合并单元格的区域，就是clomun中的filed对应的列
                                rowspan: promark                  //纵向合并的格数，如果想要横向合并，就使用colspan：mark
                            });
                            $(this).datagrid('mergeCells', {
                                index: i + 1 - promark,                 //datagrid的index，表示从第几行开始合并；紫色的内容需是最精髓的，就是记住最开始需要合并的位置
                                field: 'xjje',                 //合并单元格的区域，就是clomun中的filed对应的列
                                rowspan: promark                  //纵向合并的格数，如果想要横向合并，就使用colspan：mark
                            });
                            $(this).datagrid('mergeCells', {
                                index: i + 1 - promark,                 //datagrid的index，表示从第几行开始合并；紫色的内容需是最精髓的，就是记住最开始需要合并的位置
                                field: 'brand',                 //合并单元格的区域，就是clomun中的filed对应的列
                                rowspan: promark                  //纵向合并的格数，如果想要横向合并，就使用colspan：mark
                            });
                            $(this).datagrid('mergeCells', {
                                index: i + 1 - promark,                 //datagrid的index，表示从第几行开始合并；紫色的内容需是最精髓的，就是记住最开始需要合并的位置
                                field: 'year',                 //合并单元格的区域，就是clomun中的filed对应的列
                                rowspan: promark                  //纵向合并的格数，如果想要横向合并，就使用colspan：mark
                            });
                            $(this).datagrid('mergeCells', {
                                index: i + 1 - promark,                 //datagrid的index，表示从第几行开始合并；紫色的内容需是最精髓的，就是记住最开始需要合并的位置
                                field: 'season',                 //合并单元格的区域，就是clomun中的filed对应的列
                                rowspan: promark                  //纵向合并的格数，如果想要横向合并，就使用colspan：mark
                            });
                            $(this).datagrid('mergeCells', {
                                index: i + 1 - promark,                 //datagrid的index，表示从第几行开始合并；紫色的内容需是最精髓的，就是记住最开始需要合并的位置
                                field: 'style',                 //合并单元格的区域，就是clomun中的filed对应的列
                                rowspan: promark                  //纵向合并的格数，如果想要横向合并，就使用colspan：mark
                            });
                            $(this).datagrid('mergeCells', {
                                index: i + 1 - promark,                 //datagrid的index，表示从第几行开始合并；紫色的内容需是最精髓的，就是记住最开始需要合并的位置
                                field: 'dalei',                 //合并单元格的区域，就是clomun中的filed对应的列
                                rowspan: promark                  //纵向合并的格数，如果想要横向合并，就使用colspan：mark
                            });

                        } else {
                            promark = 1;                                         //一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
                        }

                        if (data.rows[i]['color'] == data.rows[i - 1]['color'] && promark != 1) {   //后一行的值与前一行的值做比较，相同就需要合并
                            colmark += 1;
                            $(this).datagrid('mergeCells', {
                                index: i + 1 - colmark,                 //datagrid的index，表示从第几行开始合并；紫色的内容需是最精髓的，就是记住最开始需要合并的位置
                                field: 'color',                 //合并单元格的区域，就是clomun中的filed对应的列
                                rowspan: colmark                 //纵向合并的格数，如果想要横向合并，就使用colspan：mark
                            });
                        } else {
                            colmark = 1;                                         //一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
                        }

                    }

                }

            },
            onClickRow: function (rowIndex, rowData) {
                $(this).datagrid('unselectRow', rowIndex);
            }
        });

    function hideAndShow() {
        $('#cxdm').datagrid('hideColumn', 'size');
        $('#cxdm').datagrid('hideColumn', 'color');
        $('#cxdm').datagrid('hideColumn', 'xjsl');
        $('#cxdm').datagrid('hideColumn', 'xjje');
        if ($('#chakanfangshi').combobox('getValue') == 1) {
            $('#cxdm').datagrid('showColumn', 'color');
            $('#cxdm').datagrid('showColumn', 'xjsl');
            $('#cxdm').datagrid('showColumn', 'xjje');
        }
        else if ($('#chakanfangshi').combobox('getValue') == 2) {
            $('#cxdm').datagrid('showColumn', 'color');
            $('#cxdm').datagrid('showColumn', 'size');
            $('#cxdm').datagrid('showColumn', 'xjsl');
            $('#cxdm').datagrid('showColumn', 'xjje');
        }

    }

</script>